<template>
  <div class="mes">
      <el-row type="flex"  justify="center">
          <el-col :xs="20" :sm="20" :md="12" :lg="12" :xl="12">
              <div class="grid-content bg-purple">
                  <div class="top">
                    <dl>
                        <dt><el-avatar style="font-size:40px;" :size="70" icon="el-icon-message-solid"></el-avatar></dt>
                        <dd>通知中心</dd>
                    </dl>
                </div>
                <div class="mains">
                    <ul>
                        <li v-for="item in list" :key="item.id">
                            <div class="l">
                                <el-avatar icon="el-icon-s-comment"></el-avatar>
                                <p>{{ item.info }}</p>
                            </div>
                            <div class="r over">
                                {{ item.createTime | timers }}
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="page">
                    <el-pagination
                        background
                        @current-change="goInfo"
                        layout="prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
              </div>
          </el-col>
      </el-row>
      
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[],
            total:1000,
            pageIndex:1,
            pageSize:10,
        }
    },
    created(){
        this.init()
    },
    filters:{
        timers(val){
            return new Date(val).toLocaleString();
        }
    },
    methods:{
        goInfo(val){
            this.pageIndex = val;
            this.init();
        },
        init(){
            this.$ajax.post("/sysMessage/userMessage",{
                pageIndex:this.pageIndex,
                pageSize:this.pageSize
            })
            .then(res=>{
                if(res.data.code == 0){
                    this.list = res.data.data.list;
                    this.total = res.data.data.total;
                }else{
                    this.$message.error("数据获取失败!")
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.mes{
    // max-width: 750px;
    // margin: 0 auto;
    padding: 40px 0;
        border-top: 1px solid #ccc;
        // box-shadow: 10px 10px 5px #ccc;
}
    .top{
        dl{
            dt,dd{
                display: flex;
                align-items: center;
                justify-content: center;
            }
            dt{
                margin-bottom: 20px;
            }
            dd{
                color: #585f69;
    margin-top: 5px;
    text-shadow: none;
    font-weight: 400;
    font-size: 24px;
            }
        }
    }
    .mains{
        ul{
            margin: 30px 0;
            border-bottom: 1px solid #eee;
            li{
                padding: 20px 0;
                border-top: 1px solid #eee;
                display: flex;
                align-items: center;
                div{
                    display: flex;
                    align-items: center;
                }
                .l{
                    flex: 1;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                }
                p{
                    padding:0 10px;
                    color: #555;
                    font-size: 14px;
                    flex: 1;
                    line-height: 1.6;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                    // white-space: nowrap;
                }
            }
        }
    }
.over{
        overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</style>
<style lang="scss">
.page{
    .el-pagination{
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>